<template>
	<div class="container">


		<el-form ref="biaodanmingcheng" :model="formData" label-width="80px" :rules='rules' hide-required-asterisk>
			<h2>胖虎到家-后台登录</h2>
			<el-form-item label="账号" prop='username'>
				<el-input     v-model="formData.username" placeholder='请输入账号' prefix-icon='el-icon-refresh'></el-input>
			</el-form-item>
			<el-form-item label="密码" prop='password'>
				<el-input v-model="formData.password" placeholder='请输入密码' type="password" show-password
					prefix-icon="el-icon-lock"></el-input>
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="login">登录</el-button>
				<el-button @click="resetForm">取消</el-button>
			</el-form-item>
		</el-form>




	</div>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				rules: {// 表单验证
					
					username: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'


						},
						{
							min: 1,
							max: 20,
							message: '长度在6到20个字符',
							trigger: 'blur'



						}





					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'



						},
						{
							min: 1,
							message: '长度至少 6 个字符',
							trigger: 'blur'


						}
					]


				}



			}
		},
		methods: {
			login(){
				// 登录事件
				// validata对表单的数据进行验证
				this.$refs['biaodanmingcheng'].validate((valid)=>{
					if(valid){
						// 登录合法
						// alert(this.formData.username+" "+this.formData.password);
						this.$http.post('http://43.143.190.87:8182/login?username='+this.formData.username+'&pwd='+this.formData.password)
						.then(res=>{
							if(res.data.code==1){
								this.$message.success('登陆成功')
								// 跳转页面
								this.$router.push('/main')
							}else{
								this.$message.error('账号或信息有错误')
							}
						})
						
						
						
						
					this.$message({
						
						type:'success',
						message: this.formData.username+'登录正确',
					
						
					});
					}else{
						// 登录非法
						this.$message({
							showClose: true,
							message: '请输入正确的账号和密码！',
							type: 'error'
							
						});
						return false;
					}
					
				})
				
				
			},
			resetForm() {
				alert('已经重置');
			this.$refs['biaodanmingcheng'].resetFields();
			}
			
			
			
		}
	}
</script>

<style scoped='scoped'>
	.container {

		height: 100vh;

		background-image: url('../assets/b3febf44c7089f0aa10b59c1b8c5eb44.jpeg');
		background-repeat: no-repeat;
		background-position: center;
		overflow: hidden;
		background-size: 100% 100%;
	}

	.el-form {
		width: 600px;
		margin: 150px auto;
		padding: 30px 50px;
		border-radius: 10px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		background: rgba(255, 255, 255, 0.6);
		box-sizing: border-box;
	}

	h2 {
		text-align: center;
	}
</style>